<template>
  <div
    ref="scrollId"
    style="overflow-y: scroll;height: 480px;"
  >
    <slot></slot>
    <a-spin
      v-if="scrollLoadding"
      size="small"
    />
    <div
      v-if="totalPage==pageCount"
      class="load-more"
    >没有更多数据</div>
  </div>
</template>
<script>
export default {
  props: {
    pageCount: {
      type: Number,
      required: true
    },
    totalPage: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      scrollLoadding: false
    }
  },
  mounted () {
    const vm = this
    const scrollDiv = vm.$refs.scrollId
    scrollDiv.addEventListener('scroll', () => {
      // 是否还有数据 是否到底部 是否加载中
      if (vm.hasMore() && vm.getScrollTop() + vm.getHeight() === vm.getScrollHeight() && !vm.scrollLoadding) {
        vm.$emit('getScrollData')
      }
    })
  },
  methods: {
    hasMore () {
      return this.pageCount < this.totalPage
    },
    resetPagination () {
      this.$refs.scrollId.scrollTop = 0
    },
    getScrollTop () {
      return this.$refs.scrollId.scrollTop
    },
    getScrollHeight () {
      return this.$refs.scrollId.scrollHeight
    },
    getHeight () {
      return this.$refs.scrollId.clientHeight
    }

  }
}
</script>
